<template>
  <div class="VerContainer">
    <span class="login">验证码：</span>
    <input
      type="text"
      placeholder="请输入验证码"
      placeholder-class="placeholderStyle"
      class="input-val"
      v-model.trim="yanzhen"
      @keyup="submit"
      maxlength="4"
      ref="inputRef"
    />
    <canvas id="canvas" width="130px" height="40px" @click="handleCanvas">
    </canvas>
  </div>
</template>

<script>
export default {
  data() {
    return {
      yanzhen: "", //输入框双向绑定的值
      true_code: "", //保存正确的验证码
      yanzhen_arr: [], //只用于传参，并且数组长度不能「多于」下面验证码遍历的次数，不然最终得到的true_code会有问题
      //比如下面是4个验证码，可以是[1,2,3,4]及以下，但是不能是[1，2，3，4，5]， 因为5无法被替换
      tag: false,
    };
  },
  watch: {
    yanzhen(val) {
      if (this.tag == false && this.yanzhen.length >= 1) {
        this.$refs.inputRef.style.border = "1px solid #f56c6c";
      }
      if (this.tag == true) {
        this.$refs.inputRef.style.border = "1px solid #dcdfe6";
        return;
      }
    },
  },
  methods: {
    submit(e) {
      if (e.target.value.toLowerCase() == this.true_code) this.tag = true;
      this.$emit("input-sent", this.tag);
    },
    randomColor() {
      var r = Math.floor(Math.random() * 256);
      var g = Math.floor(Math.random() * 256);
      var b = Math.floor(Math.random() * 256);
      return "rgb(" + r + "," + g + "," + b + ")";
    },
    //canvas点击刷新
    handleCanvas() {
      this.draw(this.yanzhen_arr);
    },
    draw(show_num) {
      var canvas_width = document.querySelector("#canvas").clientWidth;
      var canvas_height = document.querySelector("#canvas").clientHeight;
      var canvas = document.getElementById("canvas"); //获取到canvas
      var context = canvas.getContext("2d"); //获取到canvas画图
      canvas.width = canvas_width;
      canvas.height = canvas_height;
      var sCode =
        "a,b,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
      var aCode = sCode.split(",");
      var aLength = aCode.length; //获取到数组的长度

      //4个验证码数
      for (var i = 0; i <= 3; i++) {
        var j = Math.floor(Math.random() * aLength); //获取到随机的索引值
        var deg = (Math.random() * 30 * Math.PI) / 180; //产生0~30之间的随机弧度
        var txt = aCode[j]; //得到随机的一个内容
        show_num[i] = txt.toLowerCase(); // 依次把取得的内容放到数组里面
        var x = 25 + i * 20; //文字在canvas上的x坐标
        var y = 22 + Math.random() * 8; //文字在canvas上的y坐标
        context.font = "bold 24px 微软雅黑";

        context.translate(x, y);
        context.rotate(deg);

        context.fillStyle = this.randomColor();
        context.fillText(txt, 0, 0);

        context.rotate(-deg);
        context.translate(-x, -y);
      } //验证码上显示6条线条
      for (var i = 0; i <= 5; i++) {
        context.strokeStyle = this.randomColor();
        context.beginPath();
        context.moveTo(
          Math.random() * canvas_width,
          Math.random() * canvas_height
        );
        context.lineTo(
          Math.random() * canvas_width,
          Math.random() * canvas_height
        );
        context.stroke();
      }
      //验证码上显示31个小点
      for (var i = 0; i <= 30; i++) {
        context.strokeStyle = this.randomColor();
        context.beginPath();
        var x = Math.random() * canvas_width;
        var y = Math.random() * canvas_height;
        context.moveTo(x, y);
        context.lineTo(x + 1, y + 1);
        context.stroke();
      }

      //最后把取得的验证码数组存起来，方式不唯一
      var num = show_num.join("");
      // console.log(num);
      this.true_code = num;
    },
  },
  mounted() {
    this.draw(this.yanzhen_arr);
  },
};
</script>

<style scoped>
.VerContainer {
  display: flex;
  align-items: center;
  margin-left: 30px;
  width: 480px;
}

#canvas {
  display: block;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
}

.input-val {
  width: 140px;
  background: #ffffff;
  height: 2rem;
  border-radius: 5px;
  padding: 0 15px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  margin-right: 10px;
  margin-left: 2px;
}
.login {
  font-size: 14px;
}
input::placeholder {
  font-size: 14px;
  color: grey;
}
</style>